<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>一个简单的js鼠标拖拽div层效果丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<body>
<script type="text/javascript">
function drag(elementToDrag,event) {
	var startX=event.clientX,startY=event.clientY;
	var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
	var deltaX=startX-origX,deltaY=startY-origY;
	if(document.addEventListener) {
		document.addEventListener("mousemove",moveHandler,true);
		document.addEventListener("mouseup",upHandler,true);
	} else {
		elementToDrag.setCapture();
		elementToDrag.attachEvent("onmousemove",moveHandler);
		elementToDrag.attachEvent("onmouseup",upHandler);
		elementToDrag.attachEvent("onlosecapture",upHandler);
	}
	if(event.stopPropagation) {
		event.stopPropagation();
	} else {
		event.cancelBubble=true;
	}
	if(event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue=false;
	}
	function moveHandler(e) {
    	if(!e) e=window.event;
    	elementToDrag.style.left=(e.clientX-deltaX)+"px";
    	elementToDrag.style.top=(e.clientY-deltaY)+"px";
    	elementToDrag.style.zIndex="10";
    	elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
    	if(e.stopPropagation) {
    		e.stopPropagation();
    	} else {
    		e.cancelBubble = true;
    	}
	}
	function upHandler(e) {
		if(!e) e=window.event;
		elementToDrag.style.zIndex="1";
		if(document.removeEventListener) {
			document.removeEventListener("mouseup",upHandler,true);
			document.removeEventListener("mousemove",moveHandler,true);
		} else {
			elementToDrag.detachEvent("onlosecapture",upHandler);
			elementToDrag.detachEvent("onmouseup",upHandler);
			elementToDrag.detachEvent("onmousemove",moveHandler);
			elementToDrag.releaseCapture();
    	}
		if(e.stopPropagation) {
			e.stopPropagation();
		} else {
			e.cancelBubble=true;
		}
	}
}
</script>
<div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
<p>test</p>
</div>
</body>
</html>
<br>一个简单的鼠标拖曳效果，有待完善，不过已经相当不错的功能，希望大家喜欢哦。<br>鼠标放在层的标题栏外，即可实现拖动效果，因为这只是一个最初的基本功能，所以想要更多功能的话，需要自己完善哦<br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
    